<template>
  <div>
    <el-row class="addBtn">
      <el-button
        type="success"
        icon="el-icon-edit"
        size="small"
        align="right"
        @click="$router.push(`/questions/new`)"
        >新增试题</el-button
      >
    </el-row>
    <el-form :inline="true" :model="formData" class="demo-form-inline">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select
              placeholder="请选择"
              v-model="formData.subjectID"
              @change="onchange"
            >
              <el-option
                v-for="(item, index) in quesForm.subjects"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select v-model="formData.catalogID" placeholder="请选择">
              <el-option
                v-for="(item, index) in quesForm.twoLevelDirectory"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select v-model="formData.tags" placeholder="请选择">
              <el-option
                v-for="(item, index) in quesForm.tags"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input v-model="formData.keyword"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select v-model="formData.questionType" placeholder="请选择">
              <el-option
                v-for="(item, index) in quesForm.questionType"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="难度">
            <el-select v-model="formData.difficulty" placeholder="请选择">
              <el-option
                v-for="(item, index) in quesForm.difficulty"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="方向">
            <el-select v-model="formData.direction" placeholder="请选择">
              <el-option
                v-for="(item, index) in quesForm.direction"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select v-model="formData.creatorID" placeholder="请选择">
              <el-option
                v-for="(item, index) in quesForm.username"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input v-model="formData.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model="formData.city"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="城市">
            <el-select
              style="width: 110px"
              v-model="formData.province"
              placeholder="请选择"
              @change="cityChange"
            >
              <el-option
                v-for="(item, index) in quesForm.city"
                :key="index"
                :label="item.city"
                :value="item.city"
              ></el-option>
            </el-select>

            <el-select
              style="width: 110px; margin-left: 10px"
              v-model="formData.city2"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in quesForm.area[0]"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="">
          <el-button
            type="primary"
            size="small"
            style="float: right; margin-left: 10px"
            @click="OnSearch"
            >搜索</el-button
          >
          <el-button size="small" @click="removeForm" style="float: right"
            >清除</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
 
<script>
import { list, simple } from "@/api/hmmm/subjects.js";
import { list as getList, choice } from "@/api/hmmm/questions.js";
import { questionType, difficulty, direction } from "@/api/hmmm/constants.js";
import { datas } from "@/api/hmmm/citys.js";
export default {
  components: {},
  props: {
    now: {
      type: String,
      required: true,
    },
    tableData: {
      type: Array,
      required: true,
    },
    // page: {
    //   type: Obj,
    //   required: true,
    // },
    /* quesForm: {
      type: Object,
      required: true,
    }, */
    /* subjects: {
      default: [],
      type: Array,
    }, */
  },

  data() {
    return {
      quesForm: {
        subjects: [], //学科
        twoLevelDirectory: [], //二级目录
        tags: [], //标签
        keyword: "", //关键字
        questionType: [], //试题类型
        difficulty: [], //难度
        direction: [], //方向
        username: [], //录入人
        remarks: "", //题目备注
        shortName: "", //企业简称
        city: [], //城市
        area: [],
      },

      // 表单绑定字段
      formData: {
        subjectID: "", //学科目录
        catalogID: "", //二级目录
        tags: "", //标签名称
        keyword: "", //关键字
        questionType: "", //试题类型
        difficulty: "", //难度
        direction: "", //方向
        creatorID: "", //录入人
        remarks: "", //题目备注
        city: "", //企业简称
        province: "", //企业所在地城市
        chkState: "", //审核状态

        city2: "",
      },
    };
  },
  created() {
    this.subList();
    this.simple();
    this.quesForm.questionType = questionType;
    this.quesForm.difficulty = difficulty;
    this.quesForm.direction = direction;
    this.quesForm.city = datas;
  },
  methods: {
    cityChange() {
      this.quesForm.area = [];
      this.formData.city2 = "";
      datas.forEach((item) => {
        Object.keys(item).forEach((key) => {
          if (item[key] === this.formData.province) {
            // console.log(item.area);
            this.quesForm.area.push(item.area);
          }
        });
      });
    },
    onchange() {
      this.quesForm.twoLevelDirectory = [];
      this.quesForm.tags = [];
      this.formData.catalogID = "";
      this.formData.tags = "";
      this.subList();
    },

    // 获取学科列表
    async subList() {
      const { data } = await list();
      //   console.log(data.items);
      data.items.forEach((item) => {
        Object.keys(item).forEach((key) => {
          if (item[key] === this.value) {
            // console.log(item[key]);
            this.quesForm.twoLevelDirectory.push(item.twoLevelDirectory);

            this.quesForm.tags.push(item.tags);
          }
          //   如果里面已经有相同数据了 不要重复的
          this.quesForm.username.indexOf(item.username) == -1
            ? this.quesForm.username.push(item.username)
            : "";
        });
      });
    },
    async simple() {
      const { data } = await simple();
      this.quesForm.subjects = data;
      //   console.log(this.quesForm.subjects);
    },

    // 点击搜索
    OnSearch() {
      //   if (this.now === "base") {
      getList(this.formData).then((res) => {
        console.log(res.data.items);
        this.$emit("update:tableData", res.data.items);
        //   this.$parent.tableData = res.data.items;
      });
      //   } else {
      //   getList({ ...this.formData }).then((res) => {
      //   console.log(res);
      //   console.log(res.data.items);
      //   this.$emit("update:tableData", res.data.items);
      //   });
      //   }

      // list(this.)
    },
    // 点击清除按钮
    removeForm() {
      // 表单绑定字段
      this.formData = {
        subjectID: "", //学科目录
        catalogID: "", //二级目录
        tags: "", //标签名称
        keyword: "", //关键字
        questionType: "", //试题类型
        difficulty: "", //难度
        direction: "", //方向
        creatorID: "", //录入人
        remarks: "", //题目备注
        city: "", //企业简称
        province: "", //企业所在地城市
        chkState: "", //审核状态

        city2: "",
      };
    },
  },
};
</script>
 
<style >
.addBtn {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
</style>